<script setup>
import MoniterItem from "@/views/populationInformation/components/MoniterItem.vue";
import { onMounted, inject, reactive, nextTick } from "vue";

const $axios = inject("$axios");

onMounted(() => {
  getBackHomeCount();
});

function autoScroll() {
  const el = document.querySelector("#tableList");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 50);
}

function openWindow() {
  window.open("https://bpmn.honqun.com/admin/#/yq/PersonBackHome")
}
function getBackHomeCount() {
  $axios
    .get("person_back_home/backHomeSum")
    .then((res) => {
      // const res.data.data=[]
      const data=[
        {
          number:1,
          name:'黄寨镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:2,
          name:'练集镇',
          grids:'50',
          gridNumber:'26',
          population:'26'
        },
        {
          number:3,
          name:'魏集镇',
          grids:'34',
          gridNumber:'26',
          population:'26'
        },
        {
          number:4,
          name:'谭庄镇',
          grids:'44',
          gridNumber:'26',
          population:'26'
        },
        {
          number:5,
          name:'胡吉镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:6,
          name:'谭庄镇',
          grids:'22',
          gridNumber:'26',
          population:'26'
        },
        {
          number:7,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:8,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:9,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:10,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:11,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:12,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        },
        {
          number:13,
          name:'魏集镇',
          grids:'26',
          gridNumber:'26',
          population:'26'
        }]
      data.forEach((item) => {
        tableData.push({
          number: item.number,
          name: item.name,
          grids: item.grids,
          gridNumber: item.gridNumber,
          population: item.population,
        });
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);
</script>

<template>
  <MoniterItem title="各乡镇网格情况" class="Grid" style="width: 100%;">
    <template #content>
      <div class="content">
        <div class="line" style="font-size: 14px">
          <div style="flex: 0.5">排名</div>
          <div style="flex: 1">乡镇名称</div>
          <div style="flex: 0.8">网格数量</div>
          <div style="flex: 0.8">网格员人数</div>
          <div style="flex: 0.8">常驻人口数</div>
        </div>
        <div style="height: 90%; overflow: auto" id="tableList">
          <div
            :class="{ line: true, lineColor: index % 2 === 1 }"
            v-for="(item, index) in tableData"
            :key="index"
            ref="tableRef"
          >
            <div style="flex: 0.5;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
              <img v-if="item.number===1" src="../img/first.png" />
              <img v-if="item.number===2" src="../img/second.png" />
              <img v-if="item.number===3" src="../img/third.png" />
              <span v-if="item.number>3">{{ item.number }}</span>
            </div>
            <div style="flex: 1">{{ item.name }}</div>
            <div style="flex: 0.8;color:#00EAFF">
              {{ item.grids}}
            </div>
            <div style="flex: 0.8;color:#00EAFF">
              {{ item.gridNumber }}
            </div>
            <div style="flex: 0.8;color:#00EAFF">
              {{ item.population }}
            </div>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.Grid{
  height:460px;
}
.content{
  height: 400px;
}
.table_icon{
  margin-right: 10px;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}
</style>
